<template>
  <div class="person">
    <h1>汽车信息：汽车的名字为:{{car.name}},价格为:{{car.price}}万</h1>
    <button @click="changePrice">修改汽车价格</button>
    <button @click="changeCarInfo">修改汽车信息</button>
    <br>
    <h1>游戏列表:</h1>
    <ul>
      <li v-for="game in games" :key="game.id">{{game.name}}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import {reactive,ref} from "vue";

  // let car = reactive({name:'奔驰',price:100})
  let car = ref({name:'奔驰',price:100})
  let games = [
    {id:'game1',name:'王者荣耀'},
    {id:'game2',name:'原神'},
    {id:'game3',name:'三国杀'},
  ]

  function changePrice(){
    car.value.price += 10
    console.log(car.value.price)
  }
  function changeCarInfo(){
    //reactive的使用
    // Object.assign(car,{name:'奥迪',price:60})
    //ref的使用
    car.value = {name:'奥迪',price:60}
  }
</script>

<style>
  .person{
    background-color: yellow;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
